<template>
  <div class="box">
    <p>商户账变</p>
    <hr />
    <!-- 搜索框 -->
    <div class="serch-box">
      <!-- 商户 -->
      <DropDownOptions
        :options="selectdownAccountList"
        :placeholder="selectdownAccount"
        @blur="selectdownAccountFuc"
      />
      <!-- 账变类型 -->
      <DropDownOptionsState
        :options="selectdownAccountVariableList"
        :placeholder="selectdownAccountVariable"
        @blur="selectdownAccountVariableFuc"
      />
      <SelectTime @blur="serchTime" />
      <el-button type="primary" icon="el-icon-search" @click="searchChange"
        >搜索</el-button
      >
    </div>

    <Table :tableLabel="tableLabel" :tableData="tableData" />

    <!-- 页码 -->
    <el-pagination
      layout="total, sizes, prev, pager, next, jumper"
      :total="config.total"
      :current-page.sync="config.page"
      @size-change="handleSizeChange"
      @current-change="changePage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="config.limit"
    >
    </el-pagination>
  </div>
</template>

<script>
import Table from "../../components/MerchantManagement/BusinessListings/MerchantAccountChangeTable.vue";
import DropDownOptions from "../../components/MerchantManagement/BusinessListings/DropDownOptions.vue";
import DropDownOptionsState from "../../components/MerchantManagement/BusinessListings/DropDownOptionsState.vue";
import SelectTime from "../../components/MerchantManagement/BusinessListings/SelectTime.vue";
export default {
  data() {
    return {
      tableLabel: [
        {
          prop: "id",
          label: "记录ID",
        },
        {
          prop: "type",
          label: "类型",
        },
        {
          prop: "merchant_name",
          label: "商户名称",
        },
        {
          prop: "merchants_pwd",
          label: "商户号",
        },
        {
          prop: "order_number",
          label: "订单号",
        },
        {
          prop: "amount_before_change",
          label: "变动前金额",
        },
        {
          prop: "variable_amount",
          label: "变动金额",
        },
        {
          prop: "amount_after_change",
          label: "变动后金额",
        },
        {
          prop: "operator",
          label: "操作人",
        },
        {
          prop: "operator_role",
          label: "操作角色",
        },
        {
          prop: "operating_time",
          label: "操作时间",
        },
      ],
      tableData: [
        {
          date: "2016-05-03",
          name: "001",
          address: "上海市普陀区金沙江路 1518 弄",
          zxzt: "2",
          leixing: "1",
          biandongjinge: 2000,
          caozuojuese: "3",
          caozuoren: "123",
        },
        {
          date: "2016-05-02",
          name: "002",
          address: "上海市普陀区金沙江路 1518 弄",
          zxzt: "1",
          leixing: "2",
          biandongjinge: -2000,
          caozuojuese: "2",
          caozuoren: "568",
        },
      ],
      config: {
        page: 1,
        limit: 10,
        total: 1000,
      },
      selectdownAccount: "商户",
      selectdownAccountList: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],

      selectdownAccountVariable: "账变类型",
      selectdownAccountVariableList: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      searchbox: {
        State: "", //状态
        Account: "", //商户
        serchTime: "",
      },
    };
  },
  mounted() {
    this.gitTable();
  },
  methods: {
    //请求数据
    gitTable() {
      this.$axios({
        url: "/system/admin/mm/merchantaccountchange/findshzbAll",
        method: "GET",
        params: this.config,
      })
        .then((res) => {
          this.tableData = [...res.data.data];
          console.log(res.data);
        })
        .catch((err) => {
          console.log(err);
        });

      //商户下拉
      this.$axios({
        url: "/system/admin/mm/depositrecord/selectrjjlSh",
        method: "GET",
        params: {},
      })
        .then((res) => {
          let Data = [...res.data.data];
          this.selectdownAccountList = this.drownList(Data);
        })
        .catch((err) => {
          console.log(err);
        });

      //账变类型下拉
      this.$axios({
        url: "/system/admin/mm/merchantaccountchange/selectshzbType",
        method: "GET",
        params: {},
      })
        .then((res) => {
          let Data = [...res.data.data];
          let typeData = this.drownList(Data);
          this.selectdownAccountVariableList = this.typeData(typeData);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //请求数据

    searchChange() {
      //搜索
      this.$axios({
        url: "/system/admin/mm/merchantaccountchange/findshzbAll",
        method: "GET",
        params: {
          merchant_name: this.searchbox.Account,
          type: this.searchbox.State,
          first_time: this.searchbox.serchTime[0],
          last_time: this.searchbox.serchTime[1],
          page: this.config.page,
          limit: this.config.limit,
        },
      })
        .then((res) => {
          this.tableData = [...res.data.data];
          console.log("搜索:", res);
        })
        .catch((err) => {
          console.log(err);
        });
    },

    serchTime(v) {
      this.searchbox.serchTime = v;
      console.log(this.searchbox);
    },
    selectdownAccountFuc(v) {
      //商户
      this.searchbox.Account = v;
      console.log(this.searchbox);
    },
    //账变类型
    selectdownAccountVariableFuc(v) {
      this.searchbox.State = v;
      console.log(this.searchbox);
    },
    changePage(page) {
      //点击页码
      this.config.page = page;
      console.log(page);
      this.gitTable();
    },
    handleSizeChange(val) {
      //点击每页展示
      console.log(val);
    },
    //下拉列表遍历
    drownList(demo) {
      let drownList = [];
      for (let i = 0; i < demo.length; i++) {
        if (demo[i] !== "null") {
          drownList.push({
            label: "",
            value: "",
          });
          drownList[i].label = demo[i];
          drownList[i].value = i+1;
        }
      }
      return drownList;

    },
    typeData(type) {
      //状态遍历
      type.forEach(function (item) {
        //遍历数组类型规则
        if (item.value == 1) {
          item.label = "未审核";
        } else if (item.value == 2) {
          item.label = "冲正";
        } else if (item.value == 3) {
          item.label = "代付";
        } else if (item.value == 4) {
          item.label = "扣款";
        } else if (item.value == 5) {
          item.label = "退款";
        } else if (item.value == 6) {
          item.label = "提现成功";
        } else if (item.value == 7) {
          item.label = "充值成功";
        }
      });
      return type;
    },
  },
  components: {
    Table,
    DropDownOptions,
    DropDownOptionsState,
    SelectTime,
  },
};
</script>

<style lang="scss" scoped>
.box {
  padding: 15px;
  background-color: rgb(255, 255, 255);
}
.serch-box {
  width: 100%;
  height: 100%;
  display: flex;
}
.block,
.el-select {
  padding-right: 10px;
}
</style>